@charset "UTF-8";

.HolyGrail {
	display: -moz-flex;
	display: -webkit-flex;
	display: flex;
	-moz-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;
	margin-bottom: 40px;
}

.div-header {
	-moz-flex: 1;
	-webkit-flex: 1;
	flex: 1;
	-moz-align-items: center;
	-webkit-align-items: center;
	align-items: center;
	margin: 20px 0;
}

.div-header h3 {
	color: #333;
	font-size: 35px;
}

.HolyGrail-body {
	display: -moz-flex;
	display: -webkit-flex;
	display: flex;
	-moz-flex: 1;
	-webkit-flex: 1;
	flex: 1;
}

.HolyGrail-content {
	min-height: 500px;
	-moz-flex: 1;
	-webkit-flex: 1;
	flex: 1;
	position:relative;
}

.HolyGrail-nav, .HolyGrail-ads {
	/* 两个边栏的宽度设为12em */
	-moz-flex: 0 0 15em;
	-webkit-flex: 0 0 15em;
	flex: 0 0 15em;
}

.HolyGrail-nav {
	/* 导航放到最左边 */
	order: -1;
}

.nav-li, .nav-li li {
	border: 1px solid #ddd;
}

.nav-li li {
	width: 100%;
	height: 50px;
	line-height: 50px;
	cursor: pointer;
	color: #666;
	text-align: center;
	background: #fff;
	border-bottom: 1px solid #eee;
}

.nav-li li:hover, .nav-li li.active {
	background: #eee;
}

.frame-div {
	width: 100%;
	position: absolute;
	bottom: 55px;
	height: 80px;
	background: #fff;
}

@media ( max-width : 768px) {
	.frame-div {
		bottom: 20px;
		height: 88px;
	}
}

@media ( max-width : 490px) {
	.frame-div {
		bottom: 5px;
		height: 88px;
	}
}

@media ( max-width : 768px) {
	.HolyGrail-body {
		-moz-flex-direction: column;
		-webkit-flex-direction: column;
		flex-direction: column;
		-moz-flex: 1;
		-webkit-flex: 1;
		flex: 1;
	}
	.HolyGrail-nav, .HolyGrail-ads, .HolyGrail-content {
		-moz-flex: auto;
		-webkit-flex: auto;
		flex: auto;
	}
}